<div class="content__title">
    <h1>
        Notifications
        <small>A complete set of notification posibilities</small>
    </h1>
    <nz-breadcrumb>
        <nz-breadcrumb-item>
            <a [routerLink]="['/dashboard']">Dashboard</a>
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
            <a [routerLink]="['/elements/buttons']">Buttons</a>
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
            Notifications
        </nz-breadcrumb-item>
    </nz-breadcrumb>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Message</ng-template>
            <ng-template #body>
                <div nz-form>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6">
                            <label nz-form-item-required>Type</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="18">
                            <nz-radio-group [(ngModel)]="message.type">
                                <label nz-radio-button [nzValue]="'info'">
                                    <span>Normal</span>
                                </label>
                                <label nz-radio-button [nzValue]="'success'">
                                    <span>Success</span>
                                </label>
                                <label nz-radio-button [nzValue]="'error'">
                                    <span>Error</span>
                                </label>
                                <label nz-radio-button [nzValue]="'warning'">
                                    <span>Warning</span>
                                </label>
                                <label nz-radio-button [nzValue]="'loading'">
                                    <span>Loading</span>
                                </label>
                            </nz-radio-group>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6">
                            <label for="messageContent" nz-form-item-required>Content</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="18">
                            <nz-input [nzSize]="'large'" [(ngModel)]="message.content" [nzId]="'messageContent'"></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6">
                            <label for="messageDuration" nz-form-item-required>Duration</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="18">
                            <nz-slider [(ngModel)]="message.duration" [nzMin]="0" [nzMax]="10" [nzMarks]="marks"></nz-slider>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-control nz-col [nzSpan]="18" [nzOffset]="6">
                            <button nz-button (click)="createMessage()" [nzType]="'primary'">Show</button>
                            <button nz-button (click)="clearMessage()">Clear</button>
                        </div>
                    </div>
                </div>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Notification</ng-template>
            <ng-template #body>
                <div nz-form>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6">
                            <label nz-form-item-required>Type</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="18">
                            <nz-radio-group [(ngModel)]="notify.type">
                                <label nz-radio-button [nzValue]="'info'">
                                    <span>Normal</span>
                                </label>
                                <label nz-radio-button [nzValue]="'success'">
                                    <span>Success</span>
                                </label>
                                <label nz-radio-button [nzValue]="'error'">
                                    <span>Error</span>
                                </label>
                                <label nz-radio-button [nzValue]="'warning'">
                                    <span>Warning</span>
                                </label>
                                <label nz-radio-button [nzValue]="'blank'">
                                    <span>Blank</span>
                                </label>
                            </nz-radio-group>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6">
                            <label for="notifyTitle" nz-form-item-required>Title</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="18">
                            <nz-input [nzSize]="'large'" [(ngModel)]="notify.title" [nzId]="'notifyTitle'"></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6">
                            <label for="notifyContent" nz-form-item-required>Content</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="18">
                            <nz-input [nzSize]="'large'" [(ngModel)]="notify.content" [nzId]="'notifyContent'"></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6">
                            <label for="notifyDuration" nz-form-item-required>Duration</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="18">
                            <nz-slider [(ngModel)]="notify.duration" [nzMin]="0" [nzMax]="10" [nzMarks]="marks"></nz-slider>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-control nz-col [nzSpan]="18" [nzOffset]="6">
                            <button nz-button (click)="createNotify()" [nzType]="'primary'">Show</button>
                            <button nz-button (click)="clearNotify()">Clear</button>
                        </div>
                    </div>
                </div>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Alert Styles</ng-template>
            <ng-template #body>
                <nz-alert [nzType]="'success'" [nzShowIcon]="'true'" class="mb-md">
                    <span alert-body>
                        <pre>Success Text</pre>
                    </span>
                </nz-alert>
                <nz-alert [nzType]="'info'" [nzCloseable]="'true'" class="mb-md">
                    <span alert-body>
                        <pre>Info Text</pre>
                    </span>
                </nz-alert>
                <nz-alert [nzType]="'warning'" [nzCloseText]="'Close Now'" class="mb-md">
                    <span alert-body>
                        <pre>Warning Text</pre>
                    </span>
                </nz-alert>
                <nz-alert [nzType]="'error'" [nzMessage]="'Error'" [nzCloseable]="'true'"
                [nzDescription]="'This is an error message about copywriting.'" [nzShowIcon]="'true'"></nz-alert>
        </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Progress Bar</ng-template>
            <ng-template #body>
                <h4 class="pb-sm">Basic</h4>
                <nz-progress [ngModel]="30"></nz-progress>
                <nz-progress [ngModel]="50" [nzStatus]="'active'"></nz-progress>
                <nz-progress [ngModel]="percent" [nzStatus]="'exception'"></nz-progress>
                <div class="width-sm">
                    <nz-progress [ngModel]="percent"></nz-progress>
                    <nz-progress [ngModel]="50" [nzShowInfo]="false"></nz-progress>
                </div>
                <h4 class="py-sm">Circular</h4>
                <nz-progress [ngModel]="75" [nzType]="'circle'" [nzWidth]="80"></nz-progress>
                <nz-progress [ngModel]="percent" [nzType]="'circle'" [nzWidth]="60" [nzStrokeWidth]="4" [nzStatus]="'exception'"></nz-progress>
                <nz-progress [ngModel]="percent" [nzType]="'circle'" [nzWidth]="40" [nzStrokeWidth]="2"></nz-progress>
                <nz-button-group class="ml-lg">
                    <button nz-button (click)="decline()" [nzType]="'ghost'"><i class="anticon anticon-minus"></i></button>
                    <button nz-button [nzType]="'ghost'" (click)="increase()"><i class="anticon anticon-plus"></i></button>
                </nz-button-group>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Popconfirm</ng-template>
            <ng-template #body>
                <nz-popconfirm [nzTitle]="'Are you sure?'"
                    [nzOkText]="'Yes'" [nzCancelText]="'No'"
                    (nzOnConfirm)="popConfirm()" (nzOnCancel)="popCancel()">
                    <a nz-popconfirm>Delete</a>
                </nz-popconfirm>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Tooltip</ng-template>
            <ng-template #body>
                <nz-tooltip [nzTitle]="'prompt text'">
                    <span nz-tooltip>Tooltip will show when mouse enter.</span>
                </nz-tooltip>
                <nz-tooltip>
                    <button nz-button nz-tooltip>This Tooltip Have Icon</button>
                    <ng-template #nzTemplate>
                        <i class="anticon anticon-file"></i> <span>带图标的Tooltip</span>
                    </ng-template>
                </nz-tooltip>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Popover</ng-template>
            <ng-template #body>
                <nz-popover [nzTitle]="'Title'" [nzPlacement]="'left'">
                    <button nz-button nz-popover>Hover me</button>
                    <ng-template #nzTemplate>
                        <p>Content</p>
                        <p>Content</p>
                    </ng-template>
                </nz-popover>
                <nz-popover [nzTitle]="'Title'" [nzTrigger]="'click'">
                    <button nz-button nz-popover>Click me</button>
                    <ng-template #nzTemplate>
                        <p>Content</p>
                        <p>Content</p>
                    </ng-template>
                </nz-popover>
            </ng-template>
        </nz-card>
    </div>
</div>
